import React, { useState, useEffect } from 'react';
import { Input, Button, Card } from 'antd';
import { connect,history } from 'umi';

function Acture({ route, global, dispatch, loading }) {
  const [val, setVal] = useState(global.localpath);

  useEffect(() => {
    setVal(global.localpath);
  }, [global.localpath]);

  return (
    <Card
      title={route.name}
      extra={
        <div
          onClick={() => {
            history.push('/feedback/online');
          }}
        >
          在线沟通
        </div>
      }
    >
      <div
        style={{
          padding: 24,
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'flex-end',
          alignItems: 'flex-end',
          gap: 12,
        }}
      >
        <Input
          placeholder="请输入网址:例如 http://www.baidu.com"
          value={val}
          onChange={(e) => {
            setVal(e.target.value);
          }}
        />
        <Button
          loading={loading.effects['business/addrescind']}
          type="primary"
          onClick={() => {
            dispatch({
              type: 'global/setlocalpath',
              payload: {
                cultural_wall_url: val,
              },
            });
          }}
        >
          提交
        </Button>
      </div>
    </Card>
  );
}

export default connect(({ global, loading }) => ({
  global,
  loading,
}))(Acture);
